<template>

 <div class="big" v-if="itemData&&printData">
    <div class="main" v-for="(itemD, indexkey) in printData.codeDataVos" :key="indexkey" :style="{ width: Number(Number(itemData.width) + 1 * 2) * Number(itemData.rowQty) + 'mm' }">
      <template v-for="(itemCode, ic) in itemData.codeNum">
        <div class="cont apacerow" v-for="(item, index) in itemData.templateComponentVos" :key="index"
          :style="{ height: (itemData.height) + 'mm', width: itemData.width + 'mm', margin: 1 + 'mm', position: 'relative' }">
          <div v-for="(i, index2) in item.components" :key="index2">
            <!-- 序列号 -->
            <div
              :style="{ position: 'absolute', width: i.width + 'px', height: i.height + 'px', transform: 'rotate(' + i.rotateAngle + 'deg)', left: i.coordinateX + 'px', top: i.coordinateY + 'px' }">
              <!-- 二维码 -->
              <template v-for="it in i.dataTypeVos">
                <!--1-固定值，2-防伪序列号，3-仓储序列号，4-防伪查询 -->
                <vue-qr :text="it.category==1?it.val:it.category==2?itemD.code:it.category==3?itemD.storeCode:itemD.path||''" :qid="`id${ic}${index}${index2}${indexkey}`" v-if="i.type == 1 && i.codeType == 1"
                  :margin="0" :logoMargin="0" :logoCornerRadius="0" :size="i.width"
                  :logoSrc="i.image"></vue-qr>
              </template>
              <el-image fit="scale-down" :src="i.image" alt="" v-if="i.type == 2"
                :style="{ width: i.width + 'px', height: i.height + 'px' }">
                <template #error>
                  <div class="image-slot_xy">
                    <el-icon><icon-picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <!-- 文字 -->
              <template v-for="it in i.dataTypeVos">
                <!-- 1-序号，2-固定值，3-防伪序列号，4-仓储序列号，5-品牌名称，6-产品名称，7-产品型号，8-产品分类，9-产品规格， 10-产品生产日期，11-序列号注册日期，12-序列号质保周期 -->
                <div v-if="i.type == 3"
                  :style="{ overflow: 'hidden', width: i.width + 'px', height: i.height + 'px', fontSize: i.textWordSize + 'px', fontFamily: i.textFont == 1 ? '微软雅黑' : i.textFont == 2 ? '黑体' : i.textFont == 3 ? '宋体' : i.textFont == 4 ? '楷体' : i.textFont == 5 ? '隶书' : i.textFont == 6 ? '幼圆' : '仿宋', lineHeight: i.textRowHeight + 'px', color: i.textColor, textAlign: i.textAlign == 1 ? 'left' : i.textAlign == 2 ? 'center' : 'right', fontWeight: i.textBold ? 'bold' : 'lighter', textDecoration: i.textUnderline ? 'underline' : '', fontStyle: i.textIncline ? 'italic' : '', textIndent: i.textIndent + 'px', letterSpacing: i.textSpacing + 'px' }">
                  {{it.category==2? it.val:it.category==1?indexkey+1:it.category==3?itemD.code:it.category==4?itemD.storeCode:it.category==5?printData.brand:it.category==6?printData.name:it.category==7?printData.model:it.category==8?printData.type:it.category==9?printData.goodsSpecName:it.category==10?printData.goodsCreateTime:it.category==11?itemD.codeCreateTime:itemD.warrantyDay }}
                </div>
              </template>
            </div>
            <!-- 序列号 -->
            <div
              :style="{ width: i.width + 'px', height: i.height + 'px', position: 'absolute', transform: 'rotate(' + i.rotateAngle + 'deg)', left: i.coordinateX + 'px', top: i.coordinateY + 'px' }">
              <img :id="`barcode${ic}${index}${index2}${indexkey}`" :style="{ width: '100%', height: '100%' }"
                v-if="i.type == 1 && i.codeType == 2">
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, toRefs, watch,nextTick } from 'vue'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import JsBarcode from 'jsbarcode'
import { Picture as IconPicture } from '@element-plus/icons-vue'
const props = defineProps({
  //子组件接收父组件传递过来的值
  itemData: Object,
  printData:Object
})
//使用父组件传递过来的值
const { itemData,printData } = toRefs(props)
// 二维码 
// watch(async () => itemData.value,
//   (n) => {
//     nextTick(() => {
//       for (let index = 0; index < itemData.value.codeNum; index++) {
//         itemData.value.templateComponentVos.forEach((item, ind) => {
//           item.components.forEach((it, index2) => {
//             if (it.type == 1 && it.codeType == 2) {
//               for (const key in printData.value.codeDataVos) {
//               let text=''
//               let item=printData.value.codeDataVos[key]
//               // 1-固定值，2-防伪序列号，3-仓储序列号
//               if (it.dataTypeVos[0].category==1) {
//                 text=it.dataTypeVos[0].val
//               }else if (it.dataTypeVos[0].category==2) {
//                 text=item.code
//               }else{
//                 text=item.storeCode
//               }
//               nextTick(()=>{
//                 JsBarcode(`#barcode${index}${ind}${index2}`, String(text), options2)
//               })
//             }
//             }
//           });
//         });
//       }
//     });
//   }
// )
let options2 = {
  displayValue: false,
  fontSize: 10,
  height: 100,
  width: 5,
  textMargin: 1,
  margin: 0
};
onMounted(() => {
  if (itemData.value) {
    for (let index = 0; index < itemData.value.codeNum; index++) {
      itemData.value.templateComponentVos.forEach((item, ind) => {
        item.components.forEach((it, index2) => {
          if (it.type == 1 && it.codeType == 2) {      
            for (const key in printData.value.codeDataVos) {
              let text=''
              let item=printData.value.codeDataVos[key]
              // 1-固定值，2-防伪序列号，3-仓储序列号
              if (it.dataTypeVos[0].category==1) {
                text=it.dataTypeVos[0].val
              }else if (it.dataTypeVos[0].category==2) {
                text=item.code
              }else{
                text=item.storeCode
              }
              nextTick(()=>{
               JsBarcode(`#barcode${index}${ind}${index2}${key}`, String(text), options2)
              })
            }
          }
        });
      });
    }
  } 
})
</script>
<style scoped lang="scss">
@import '../index.scss';

.image-slot_xy {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
}

.image-slot_xy .el-icon {
  font-size: 30px;
}
</style>